<template>
	<view class="bg">
		<view style="height: 1px"></view>
		<view class="signInfo">
			<view class="signInfo_time_up">
				<image class="img_sign" src="@/static/ico_signed.png" v-if="signtoWorkTime!=''">
					<image class="img_unsign" src="@/static/ico_unsign.png" v-else>
						<view class="time">
							<view class="signTime">{{attendanceBegin.time!=null?signtoWorkTime+'打卡':'未打卡'}}</view>
							<view class="workTime">{{startWorkTime}}上班<view class="cardtip" v-if="signtoWorkTime!=''">
									{{attendanceBegin.status==1?'迟到':'正常'}}
								</view>
							</view>
						</view>
			</view>
			<view style="height: 34px;width: 1px; background-color:#ccc ;"></view>
			<view class="signInfo_time_down">
				<image class="img_sign" src="@/static/ico_signed.png" v-if="signoffWorkTime!=''">
				<image class="img_unsign" src="@/static/ico_unsign.png" v-else>
				<view class="time">
					<view class="unSignTime">{{attendanceEnd.time!=null?signoffWorkTime+'打卡':'未打卡'}}</view>
					<view class="workTime">{{endWorkTime}}下班<view class="cardtip" v-if="signoffWorkTime!=''">
							{{attendanceEnd.status==2?'早退':'正常'}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="signInfo_btn" @click="sign()">
			<image src="@/static/bg_sign.png" style="width:160px;height: 160px;position: absolute;z-index: 1;">
				<span v-if="attendanceBegin.time==null">上班打卡</span>
				<span v-else>下班打卡</span>
				<span>{{nowTime}}</span>
		</view>

	</view>
</template>

<script>
	import {
		formatDate,
		formatTime
	} from '@/common/date.js';
	import {
		listMyAttendanceRecord,
		saveMyAttendanceRecord,
		getAttendanceConfig
	} from '@/api/attendance.js'
	export default {
		data() {
			return {
				formData: {
					"user_uid": uni.getStorageSync('username')
				},
				attendanceBegin: {},
				attendanceEnd: {},
				pid: '',
				signStatus: 0, //签到状态
				inLocation: false,
				address: '',
				nowTime: '',
				// nowTime: new Date(),
				startWorkTime: '09:00',
				endWorkTime: '18:00',
				startClockStatus: 0,
				endClockStatus: 0,

				// 签到公司坐标
				userLat: 0,
				userLng: 0,
				compLat: 0,
				compLng: 0,
				distance: 0,
				isSclockList: true
			}
		},
		computed: {
			signtoWorkTime() {
				return formatTime(this.attendanceBegin.time)
			},
			signoffWorkTime() {
				return formatTime(this.attendanceEnd.time)
			}
		},
		mounted() {
			this.getConfig();
			this.getClockMonthDate();

			let timers = setInterval(() => {
				this.nowTime = formatTime(new Date())
			}, 1000)

			var that = this;
			that.getLoaction('')
			this.getAddress = setInterval(() => {
				// that.getLoaction()
			}, 5000)

		},
		beforeDestroy() {
			if (this.timers) {
				clearInterval(this.timers);
			}
			if (this.getAddress) {
				clearInterval(this.getAddress);
			}
		},

		methods: {
			async sign() {
				var param = null;
				if (this.attendanceBegin.time == null) {
					param = this.attendanceBegin;
					param.type = 0;
				} else {
					param = this.attendanceEnd;
					param.type = 1;
				}

				var res = null;
				try {
					res = await saveMyAttendanceRecord({
						data: param
					});
					console.log(res.data)
					uni.showToast({
						title: '打卡成功！',
						icon: 'success'
					})
					this.getClockMonthDate()
				} catch (err) {
					console.log(err)
				} finally {

				}

			},
			async getClockMonthDate() {
				var res = null;
				try {
					res = await listMyAttendanceRecord({
						data: {
							time: formatDate(new Date())
						}
					});
					if (res.data.length > 0) {
						this.attendanceBegin = res.data[0]
					}
					if (res.data.length > 1) {
						this.attendanceEnd = res.data[res.data.length - 1]
					}
				} catch (err) {
					console.log(err)
				} finally {

				}
			},
			async getConfig() {
				var res = null;
				try {
					res = await getAttendanceConfig({
						data: {
							id: 1
						}
					});
					console.log(res.data)
					this.startWorkTime = res.data.beginWorkTime;
					this.endWorkTime = res.data.endWorkTime;
				} catch (err) {
					console.log(err)
				} finally {
			
				}
			},
			ClockInAdd(val) {
				let _this = this;
				let params = {
					"user_uid": uni.getStorageSync('username'),
					"pid": _this.pid,
					"clockTime": _this.nowTime,
					"clockStatus": _this.signStatus,
					"isField": _this.inLocation ? 1 : 0
				}
				if (val || _this.signStatus == 3) {
					params['remarks'] = val
				}
				uniCloud.callFunction({
					name: 'clockIn',
					data: {
						name: 'ClockInAdd',
						data: params
					}
				}).then((res) => {
					if (res.result.id) {
						uni.showToast({
							title: '打卡成功！',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '打卡失败！',
							icon: 'none'
						})
					}
					_this.getClockMonthDate();
				})
			},

			getLoaction(val) {
				if (val && val == 'showLoad') {
					uni.showLoading({
						title: '获取定位中...',
						mask: false
					});
				}
				var that = this;
				uni.getLocation({
					type: 'gcj02 ',
					geocode: true,
					success: function(res) {
						console.log(res)
						if (val && val == 'showLoad') {
							uni.hideLoading()
						}
						that.userLat = res.latitude
						that.userLng = res.longitude
					},
					fail: function(res) {
						if (val && val == 'showLoad') {
							uni.hideLoading()
							uni.showToast({
								title: '获取定位失败！',
								icon: 'none',
								mask: true
							})
						}
					}
				});
			},
			// 计算距离函数
			Rad(d) {
				//根据经纬度判断距离
				return d * Math.PI / 180.0;
			},
			getDistance(lat1, lng1, lat2, lng2) {
				// lat1用户的纬度
				// lng1用户的经度
				// lat2公司的纬度
				// lng2公司的经度
				var radLat1 = this.Rad(Number(lat1))
				var radLat2 = this.Rad(Number(lat2))
				var a = radLat1 - radLat2;
				var b = this.Rad(Number(lng1)) - this.Rad(Number(lng2));
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
					.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10;
				console.log('经纬度计算的距离:' + s)
				return s
			},

			routePatchCard() {
				uni.navigateTo({
					url: '/pagesOA/patchCard/index'
				});
			}
		}
	}
</script>

<style>
	.bg {
		background-color: #F7F8FA;
		width: 100%;
		height: 100%;
	}

	.signInfo {
		border-radius: 6px;
		padding: 17px 18px 16px;
		margin: 14px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.signInfo_time_up,
	.signInfo_time_down {
		display: flex;
		flex: 1;
	}

	.signInfo_time_down {
		justify-content: center;
	}

	.img {
		width: 18px;
		height: 18px;
		margin-top: 4px;
	}

	.img_sign {
		width: 18px;
		height: 18px;
		margin-top: 3px;
	}

	.img_unsign {
		width: 18px;
		height: 18px;
		margin-top: 3px;
	}

	.time {
		margin-left: 12px;
	}

	.signTime,
	.unSignTime {
		color: #333;
		font-size: 15px;
		font-weight: bold;
	}

	.workTime {
		font-size: 12px;
		color: #c0c0c0;
		display: flex;
	}

	.cardtip {
		margin-left: 10rpx;
		font-size: 8px;
		color: #FFB937;
		border: 1px solid #FFB937;
		border-radius: 2px;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}

	.signInfo_btn {
		position: relative;
		height: 160px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 135px;
	}

	.signInfo_btn span:nth-child(2) {
		z-index: 2;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}

	.signInfo_btn span:nth-child(3) {
		z-index: 3;
		color: #B6DDFF;
		font-size: 14px;
	}

	.location {
		padding: 17px 18px;
		background-color: #fff;
		margin: 14px;
		border: 1px solid #fff;
		border-radius: 3px;
		display: flex;
		align-items: center;
	}

	.location image {
		width: 18px;
		height: 18px;
	}

	.location_content {
		width: 90%;
		margin-left: 12px;
		display: inline-flex;
		align-items: center;
	}

	.location_content_tip {
		font-size: 15px;
		color: #333;
		font-weight: bold;

	}

	.location_content_address {
		flex: 1;
		color: #999;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tip {
		text-align: center;
		color: #999;
		font-size: 13px;
		margin-top: 38px;
	}

	.tip span {
		color: #3B89F5;
		margin-left: 5px;
	}
</style>